<template>
	<view class="course-detail">
		<!-- 最上面紫色图片区域 -->
		<view class="top-box">
			<view class="top-picture">
				<img class="t-img"
					:src="idData.url"
					alt="">
				<view @click="collectFn" class="tr-bottom-box">
					<!-- <image class="tr-bottom" :src="collectImg" mode=""></image> -->
					<img class="tr-bottom" :src="collectImg" alt="">
					<!-- <img class="tr-bottom"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/2_u2859.png"
						alt=""> -->
				</view>
			</view>
		</view>

		<!-- 课程评分、价格区域 -->
		<view class="score-box">
			<view class="score">

				<view><text class="in">{{idData.coursename}}</text></view>
				<view class="starts-box">
					<img class="starts"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2850.png"
						alt="">
					<img class="starts"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2850.png"
						alt="">
					<img class="starts"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2850.png"
						alt="">
					<img class="starts"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2850.png"
						alt="">
					<img class="starts"
						src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2854.png"
						alt="">
					<text class="num">{{idData.appraise}}</text>
				</view>
				<view><text class="peoples">{{idData.sales}}人在学</text></view>
			</view>
			<view class="price">
				<img class="rmb"
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%A6%96%E9%A1%B5/u120.png"
					alt="">
				<text class="rmb-num">{{idData.courseprice}}.00</text>
			</view>
		</view>

		<!-- 选项卡头部导航按钮 -->
		<view class="nav-box">
			<view><text :class="choose==1?'nav-active':'nav-no'" @click="chooseFn(1)">课程简介</text></view>
			<view><text :class="choose==2?'nav-active':'nav-no'" @click="chooseFn(2)">课程设置</text></view>
			<view><text :class="choose==3?'nav-active':'nav-no'" @click="chooseFn(3)">师资介绍</text></view>
		</view>

		<!-- 切换的内容 -->
		<view class="content1" v-if="choose==1">
			<view class="goal">
				<!-- 教学目标 -->
				<view class="goal-title"><text>教学目标</text></view>
				<img class="goal-img"
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%80%81%E5%B8%88%E4%BB%8B%E7%BB%8D/u2376.png"
					alt="">
				<view>
					<text class="goal-text">{{idData.goal}}</text>
				</view>
				<img class="goal-big"
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2869.png"
					alt="">
			</view>
			<!-- 级别描述 -->
			<view class="goal">
				<view class="goal-title"><text>级别描述</text></view>
				<img class="goal-img"
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%80%81%E5%B8%88%E4%BB%8B%E7%BB%8D/u2376.png"
					alt="">
				<view>
					<text class="goal-text">{{idData.description}}</text>
				</view>
				<!-- <view>
					<text
						class="goal-text">2、学习技能：用学科知识引导学生的语言学习，使外语水平与学科知识相互促进；通过故事复习，巩固已学知识点，并引导孩子学习故事中的价值观。掌握语音知识学习拼读技能，融入场景练习，做到活学活用。</text>
				</view> -->
				<img class="goal-big"
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/u2870.png"
					alt="">
				<!-- <view><text class="goal-text">我们为您配备专业的学习顾问，为宝贝规划对应的英语学习路径和辅导提升计划，保证优质服务质量。</text></view> -->
			</view>
			<!-- 底线 -->
			<BottomText></BottomText>
		</view>
		<view class="content2" v-if="choose==2">
			<uni-collapse ref="collapse" v-model="value" @change="change">
				<uni-collapse-item :title="v.bchapter" v-for="v in idData.chapter">
					<view class="content">
						<text class="text">{{v.schapter}}</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<BottomText></BottomText>
		</view>
		<view class="content1" v-if="choose==3">
			<view class="goal" v-for="t in idData.teacher">
				<!-- JASON老师 -->
				<view class="goal-title"><text>{{t.tname}}</text></view>
				<img class="goal-img"
					src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%80%81%E5%B8%88%E4%BB%8B%E7%BB%8D/u2376.png"
					alt="">
				<view>
					<text
						class="goal-text">{{t.introduce}}</text>
				</view>
				<img class="goal-big"
					:src="t.turl"
					alt="">
			</view>
			<!-- 底线 -->
			<BottomText></BottomText>
		</view>

		<!-- 底部区域 -->
		<view class="bottom-box">
			<view class="bottom">
				<view class="b-left">
					<text>￥{{idData.courseprice}}</text>
				</view>
				<view class="b-right" @click="createNum">
				<!-- <view class="b-right" @click="another('success')"> -->
					<!-- <view class="b-right" url="/pages/orderSettlement/orderSettlement"> -->
					<text>立即购买</text>
				<!-- </view> -->
				</view>
			</view>
		</view>

		<!-- 已授权未注册弹窗提示 -->
		<!-- <uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title=" " content="注册后才能购买此课程，现在前往注册？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>


<script setup>
	// 引入的底线公共组件
	import BottomText from '../../components/BottomText/BottomText.vue'
	import {ref,onMounted} from "vue"
	import http from "../../utils/http.js"
	import {onLoad} from "@dcloudio/uni-app"
	
	let id=ref();
	// 定义一个放数据的数组
	let allData=ref([]);
	// 定义根据id查询出来的数据
	let idData=ref([]);
	// 定义页数条数总条数
	let page=ref(1);
	let limit=ref(10);
	let total=ref(0);
	// 渲染数据的接口
	// const getData = () => {
	//   http({
	//     url: "/course/list",
	//     data: {
	//       page: page.value,
	//       limit: limit.value,
	//     },
	//   }).then(({ data }) => {
	//     console.log(data.data);
	//     if (data.code == 0) {
	// 		allData.value = data.data;
	// 		total.value = data.total;
	//     }
	//   });
	// };
	
	// 生成订单号
	let order=ref()
	const createNum=()=>{
		http({
		  url: "/course/createOrder",
		  method:'post',
		  params: {
		    id:id.value,
			userId:1
		  },
		}).then((res) => {
		  console.log(res.data);
		  if (res.code == 0) {
			order.value=res.data
			// console.log('000000000000',order.value);
			uni.navigateTo({
				url:`/pages/Confirm-Order/Confirm-Order?order=${order.value}`
			})
		  }
		});
	}
	
	// 点击跳转并传一个订单号
	// const createNum=()=>{
	// 	uni.navigateTo({
	// 		url="/pages/Confirm-Order/Confirm-Order"
	// 	})
	// }

	// 渲染数据的接口
	const getIdData = () => {
	  http({
	    url: "/course/pre",
		params:{
			id:id.value
		}
	  }).then((res) => {
	    // console.log(res.data);
	    if (res.code == 0) {
			idData.value = res.data;
			console.log(res.data);
	    }
		console.log('idData的章节',idData.value.chapter);
	  });
	};
	// 挂载后
	onMounted(()=>{
		getIdData();
		// getData();
		const getId=(id)=>{
			console.log(id.id);
		}
	})
	
	// 页面加载传来的id
	onLoad((option)=>{
		// console.log(111111);
		id.value=option.id
		console.log(id.value);
	})

	// 选项卡默认1
	let choose = ref(1);
	// 收藏图片
	let collectImg = ref(
		"https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/1_u2858.png"
		);
	// 选项卡切换
	const chooseFn = (index) => {
		choose.value = index;
	};
	// 添加收藏
	const addCollection = () => {
	  http({
	    url: "/user/collect/courseAdd",
		method:'post',
		params:{
			courseId:id.value,
			userId:1
		}
	  }).then((res) => {
	    console.log(res);
	    if (res.code == 0) {
			// idData.value = res.data;
			// console.log(res.data);
			console.log(6666);
	    }
	  });
	};
	// 取消收藏
	const delCollection = () => {
	  http({
	    url: "/user/collect/mvCourse",
		method:'delete',
		params:{
			courseId:id.value,
			userId:1
		}
	  }).then((res) => {
	    console.log(res);
	    if (res.code == 0) {
			// idData.value = res.data;
			// console.log(res.data);
			console.log(7777);
	    }
	  });
	};
	// 收藏图片切换
	const collectFn = () => {
		if (collectImg.value =='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/1_u2858.png') {
			collectImg.value ='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/2_u2859.png'
			uni.showToast({
				title: '已收藏',
				duration: 2000
			});
			addCollection();
		} else {
			collectImg.value ='https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E8%AF%BE%E7%A8%8B%E8%AF%A6%E6%83%85/1_u2858.png'
			delCollection();
		}
	};
	
	const alertDialog=ref();
	const msgType=ref();
	// 未注册的弹框
	// const another=(type)=> {
	// 	msgType.value = type
	// 	alertDialog.value.open()
	// };
	//未注册弹框确认跳转注册
	// const dialogConfirm=()=> {
	// 	uni.redirectTo({
	// 		// 跳转到注册的页面
	// 		url: '/pages/orderSettlement/orderSettlement'
	// 	});
	// };
</script>

<style lang="less" scoped>
	// 最上面紫色区域
	.top-box {
		width: 750rpx;
		height: 420rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-picture {
			width: 628rpx;
			height: 340rpx;
			position: relative;
		}
	}

	//图片
	.t-img {
		width: 628rpx;
		height: 340rpx;
	}

	//收藏星
	.tr-bottom-box {
		width: 86rpx;
		height: 86rpx;
		background-color: white;
		position: absolute;
		bottom: -40rpx;
		right: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		box-shadow: 0 4px 6px 0 #f3dcff;

		.tr-bottom {
			width: 60rpx;
			height: 60rpx;
		}
	}

	// 课程评分、价格区域
	.score-box {
		width: 750rpx - 84rpx;
		height: 136rpx;
		// background-color: aliceblue;
		margin-top: 10rpx;
		padding: 0 42rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.score {
			width: 266rpx;
			height: 134rpx;
			// background-color: red;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.in {
				font-size: 32rpx;
				font-weight: bold;
			}

			.starts-box {
				display: flex;
				align-items: center;

				.starts {
					width: 28rpx;
					height: 28rpx;
					vertical-align: middle;
				}

				.num {
					font-size: 28rpx;
					color: #ffcc00;
					font-weight: bold;
					margin-left: 5rpx;
				}
			}

			.peoples {
				font-size: 26rpx;
				color: #9993a5;
			}
		}

		.price {
			display: flex;
			align-items: center;

			.rmb {
				width: 34rpx;
				height: 34rpx;
			}

			.rmb-num {
				color: #ffcc00;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}
	}

	// 选项卡头部导航区域
	.nav-box {
		width: 750rpx - 120rpx;
		height: 146rpx;
		// background-color: red;
		padding: 0 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.nav-no {
			color: #aaaaaa;
		}

		.nav-active {
			color: black;
			font-weight: bold;
		}
	}

	// 切换内容1
	.content1 {
		width: 750rpx - 76rpx;
		padding: 0 38rpx;

		.goal {
			display: flex;
			flex-direction: column;
			align-items: center;

			.goal-title {
				width: 150rpx;
				color: #4d8cff;
				padding-bottom: 25rpx;
				display: flex;
				justify-content: center;

			}

			.goal-img {
				width: 42rpx;
				height: 10rpx;
				padding-bottom: 25rpx;
			}

			.goal-text {
				font-size: 24rpx;
				text-align: left;
				line-height: 50rpx;
			}

			.goal-big {
				width: 674rpx;
				height: 354rpx;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}
		}
	}

	//切换内容2
	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	//底部支付
	.bottom-box {
		height: 146rpx;

		.bottom {
			width: 750rpx;
			height: 146rpx;
			background-color: white;
			position: fixed;
			bottom: 0;
			border-top: 1px solid #f4f4f4;
			display: flex;
			justify-content: space-between;

			.b-left {
				width: 375rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: red;
				font-weight: bold;
				font-size: 38rpx;
			}

			.b-right {
				flex: 1;
				background-color: #2f78ff;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				font-size: 36rpx;
			}
		}
	}
</style>
